<template>
  <div class="page-header">
    <div class="header-title">
      <img src="img/bg_top.png" alt="" />
      <span class="header-text">{{title}}</span>
    </div>
    <div class="header-time-box" v-if="time">
      <div class="time">{{time}}</div>
      <div class="tiem-add-box">
        <p class="date">{{date}}</p>
        <p class="address"><img src="img/icon_address.png" alt="" />{{address}}</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'pageHeader',
  components: {

  },
  props: {
    title: {
      type: String,
      default: '全球地理标志大数据'
    },
    address: {
      type: String,
      default: '成都市'
    }
  },
  data() {
    return {
      time: '',
      date: ''
    }
  },
  watch: {

  },
  created() {
    setInterval(() => {
      this.getDate()
    }, 1000)
    this.date = this.utils.dateFormat(new Date(), 'YYYY/MM/DD')
  },
  mounted() {

  },
  methods: {
    getDate() {
      this.time = this.utils.dateFormat(new Date(), 'YYYY/MM/DD hh:mm:ss').split(' ')[1]
    }
  }
}
</script>
<style lang="less">
  .page-header {
    position: relative;
    width: 100%;
    .header-title {
      height: 71px;
      width: 65.6%;
      margin: 0 auto;
      position: relative;
      line-height: 71px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .header-text {
      font-size: 30px;
      color: #1accff;
      font-weight: 600;
      position: absolute;
      top: 0px;
      left: 0;
      width: 100%;
    }
    .header-time-box {
      position: absolute;
      right: 40px;
      top: 16px;
      color: #fff;
      display: flex;
      width: 224px;
      justify-content: space-between;
      .time {
        font-size: 36px;
        width: 152px;
      }
      .tiem-add-box {
        font-size: 12px;
        display: flex;
        flex-flow: column;
        justify-content: center;
        .address {
          img {
            position: relative;
            vertical-align: bottom;
          }
        }
      }
    }
  }
</style>
